<template>
  <div>
    <div v-transfer-dom>
      <actionsheet :menus="menus" @on-click-menu="clickMenu" v-model="showMenu" show-cancel></actionsheet>
    </div>
    <!-- <top class="top"></top> -->
    <!-- <view-box ref="viewBox" body-padding-top="40px" >

      
    </view-box>-->
    <div style="margin-bottom:45px">
      <x-header slot="header" ref="header" style="width:100%;position:fixed;left:0;top:0;z-index:100;" @on-click-more="showExit"
        :left-options="{showBack: true, backText: '返回'}">
        <span>{{title}}</span>
        <!-- <span style="float:right">{{userName}}</span> -->
      </x-header>
    </div>
    <group label-width="4.5em" label-margin-right="2em" label-align="right">
      <x-input title="姓名" placeholder="点击输入姓名" v-model.trim="userName"></x-input>
      <!-- <cell title="姓名" value-align="left" v-model="userName"></cell> -->
      <x-input title="身份证号" :max="18" placeholder="点击输入身份证号" v-model.trim="IdCar"></x-input>
      <!-- <cell title="身份证号" value-align="left" v-model="IdCar"></cell> -->
      <x-input title="手机号码" mask="999 9999 9999" :max="13" is-type="china-mobile" placeholder="点击输入手机号" v-model.trim="phone"></x-input>
      <x-input title="住址" placeholder="点击输入地址" v-model.trim="address"></x-input>
      <!-- <x-input title="性别" placeholder="请选择性别" v-model.trim="address"></x-input> -->

      <popup-picker title="性别" :data="genderList" v-model="gender" value-text-align="left" placeholder="请选择性别" style="text-align: left;">
      </popup-picker>
      <!-- <x-input title="学历" placeholder="请选择性别" v-model.trim="address"></x-input> -->

      <popup-picker title="学历" :data="educationList" v-model="education" value-text-align="left" placeholder="请选择质保年限" style="text-align: left;">
      </popup-picker>
      <datetime v-model="birthday" placeholder="请选择生日" value-text-align="left" title="生日"></datetime>
      <x-input title="密码" type="password" v-model.trim="pwd" placeholder="点击输入密码"></x-input>
      <x-input title="密码确认" type="password" v-model.trim="pwdConfirm" placeholder="点击输入密码"></x-input>
    </group>
    <group style="padding:5px 20px;">
      <x-button type="primary" action-type="button" @click.native="Save">提交注册信息</x-button>
    </group>
  </div>
</template>

<script>
import {
  GroupTitle,
  Group,
  Cell,
  Selector,
  PopupPicker,
  LoadMore,
  XInput,
  XButton, XHeader, Actionsheet,
  Datetime,
} from "vux";
import { mapState, mapActions, mapGetters } from "vuex";
export default {
  name: "mine",
  components: {
    GroupTitle,
    Group,
    Cell,
    Selector,
    PopupPicker,
    LoadMore,
    XInput,
    XButton,
    XHeader,
    Actionsheet, Datetime
  },
  data() {
    return {
      pwd: "",
      pwdConfirm: "",
      bCount: 0, showMenu: false,
      menus: {
        // ChangePwd: "密码修改",
        SingOut: "注销账号",
        ExitApp: "退出系统",
      },
      IdCar: '', CarNo: "", phone: "", userName: '', address: '', education: [],
      gender: [], birthday: '',
      genderList: [["男", "女"]],
      // educationList: ["college","undergraduate","master","doctor","other"],
      educationList: [["专科", "本科", "硕士", "博士", "其他"]],
    };
  },
  methods: {
    clickMenu(locale) {
      console.log(locale);
      switch (locale) {
        case "ChangePwd":
          break;
        case "SingOut":
          localStorage.removeItem("username");
          localStorage.removeItem("password");
          localStorage.removeItem("autoLogin");
          this.$router.push({ path: "/" });
          break;
        case "ExitApp":
          //wx.closeWindow();
          Android.exitApp();
          break;
        default:
          break;
      }
    },
    //弹出菜单
    showExit() {
      this.showMenu = true;
    },
    Save() {
      if (this.userName == "" || this.userName == null) {
        this.$vux.alert.show({
          title: "提示",
          content: "姓名不能为空",
          onShow() {
            console.log("Plugin: I'm showing");
          },
          onHide() {
            console.log("Plugin: I'm hiding");
          },
        });
        return;
      }
      if (this.IdCar == "" || this.IdCar == null) {
        this.$vux.alert.show({
          title: "提示",
          content: "身份证不能为空",
          onShow() {
            console.log("Plugin: I'm showing");
          },
          onHide() {
            console.log("Plugin: I'm hiding");
          },
        });
        return;
      }
      if (this.phone == "" || this.phone == null) {
        this.$vux.alert.show({
          title: "提示",
          content: "手机号码不能为空",
          onShow() {
            console.log("Plugin: I'm showing");
          },
          onHide() {
            console.log("Plugin: I'm hiding");
          },
        });
        return;
      }
      if (this.pwd == null || this.pwd == "") {
        this.$vux.alert.show({
          title: "提示",
          content: "新密码不能为空",
          onShow() {
            console.log("Plugin: I'm showing");
          },
          onHide() {
            console.log("Plugin: I'm hiding");
          },
        });
        return;
      }
      if (this.pwdConfirm == null || this.pwdConfirm == "") {
        this.$vux.alert.show({
          title: "提示",
          content: "密码确认不能为空",
          onShow() {
            console.log("Plugin: I'm showing");
          },
          onHide() {
            console.log("Plugin: I'm hiding");
          },
        });
        return;
      }
      if (this.pwdConfirm != this.pwd) {
        this.$vux.alert.show({
          title: "提示",
          content: "密码和确认密码不一致",
          onShow() {
            console.log("Plugin: I'm showing");
          },
          onHide() {
            console.log("Plugin: I'm hiding");
          },
        });
        return;
      }
      let gender = this.gender;
      if (gender == "男") {
        gender = "male";
      } else {
        gender = "female";
      }
      let education = this.education;
      switch (education) {
        case '专科':
          education = "college";
          break;
        case '本科':
          education = "undergraduate";
          break;
        case '硕士':
          education = "master";
          break;
        case '博士':
          education = "doctor";
          break;
        case '其他':
          education = "other";
          break;
        default:
          education = "other";
          break;
      }
      let parmas = {

        IdCar: this.IdCar,
        phone: this.phone,
        readerName: this.userName,
        pwd: this.pwd,
        adress: this.adress,
        gender: gender,
        education: education,
        birthday: this.birthday,

      }
      this.$http
        .post("/api/libraryReader/reg-reader", parmas)
        .then(res => {
          if (res.data.data) {

          }
        })
        .catch(err => {
          console.log("err--" + err);
          this.$state.error();
        });

    },

    goBack() {
      this.bCount = this.bCount + 1;
      if (this.bCount >= 2) {
        Android.exitApp();
      } else {
        setTimeout(function () {
          this.bCount = 0;
        }, 2000)
        Android.ShowExit();
      }
    },
  },
  computed: {
    ...mapState({
      showBack: (state) => state.showBack,
      title: (state) => state.title,
    }),
  },
  created() {
    this.$store.commit("updateTitle", "读者信息注册");
    this.$store.commit("updateShowBack", false);
  },
  mounted() {
    window.goBack = this.goBack;
    console.log(this.$store.state.showBack);
  },
};
</script>

<style scoped>
.vux-header {
  background-color: #1478ee !important;
}
.weui-btn_primary {
  background-color: #1478ee;
}
.weui-btn_primary:hover {
  background-color: #1478ee;
}
.weui-btn_primary:active {
  background-color: #1478ee;
}
.weui-btn_primary {
  background-color: #1478ee;
  &:not(.weui-btn_disabled):visited {
    color: #1478ee;
  }
  &:not(.weui-btn_disabled):active {
    background-color: #1478ee;
  }
}
</style>
